<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!--    系统用户端首页，为上、中、下结果，上为导航栏，包括系统logo、登录和注册按钮，用户登录后的头像、昵称以及菜单，中为主体，根据路由变化而变化，下为网页底部信息-->
    <meta charset="UTF-8">
    <title>SACP：让每个人都能享受学习带来的乐趣！</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico" th:href="@{/static/favicon.ico}"/>
<!--    vue-->
    <script th:src="@{/static/vue.global.js}" src="/static/vue.global.js" type="text/javascript"></script>
<!--    vue-router-->
    <script th:src="@{/static/vue-router.global.js}" src="/static/vue-router.global.js" type="text/javascript"></script>
<!--    vuex-->
    <script th:src="@{/static/vuex.global.js}" src="/static/vuex.global.js" type="text/javascript"></script>
<!--    vue component loader-->
    <script th:src="@{/static/vue3-sfc-loader.js}" src="/static/vue3-sfc-loader.js" type="text/javascript"></script>
<!--    index.html css-->
    <link th:href="@{/static/css/index.css}" href="/static/css/index.css" type="text/css" rel="stylesheet"/>
<!--    elementUI css-->
    <link th:href="@{/static/css/element.css}" href="/static/css/element.css" type="text/css" rel="stylesheet"/>
<!--    elementUI js-->
    <script th:src="@{/static/index.full.js}" src="/static/index.full.js" type="text/javascript"></script>
<!--    index.html js-->
    <script th:src="@{/static/js/index.js}" src="/static/js/index.js" type="text/javascript"></script>
<!--    七牛sdk-->
    <script type="text/javascript" th:src="@{/static/js/qiniu.min.js}" src="/static/js/qiniu.min.js" ></script>
<!--    axios ajax-->
    <script type="text/javascript" th:src="@{/static/axios.min.js}" src="/static/axios.min.js" ></script>
    <!--    vConsole-->
<!--    <script type="text/javascript" th:src="@{/static/js/vconsole.js}" src="/static/js/vconsole.js" ></script>-->
    <!--    ckplayer 视频播放器-->
    <script type="text/javascript" th:src="@{/static/ckplayer/ckplayer/ckplayer.min.js}" src="/static/ckplayer/ckplayer/ckplayer.min.js" charset="utf-8" data-name="ckplayer"></script>
<!--    cookiejs cookie工具-->
    <script type="module">
        import Cookies from '../static/mjs/js.cookie.mjs'
        window.Cookies = Cookies
    </script>
<!--    axios ajax-->
    <script type="text/javascript" th:src="@{/static/axios.min.js}" src="/static/axios.min.js" ></script>
<!--    wangEditor-->
    <script type="text/javascript" th:src="@{/static/js/wangEditor.min.js}" src="/static/js/wangEditor.min.js" ></script>
</head>
<body>
<div id="app" class="app">
<!--    头部-->
    <div id="header">
        <div id="header-main">
            <div class="left">
                <a th:href="@{/}">
                    <img th:title="让每个人都能享受学习带来的乐趣" id="logo" src="http://sacp.moeneko.top/%E6%97%A0%E6%A0%87%E9%A2%98.png">
                </a>
                <el-menu
                        class="el-menu-demo"
                        mode="horizontal"
                        background-color="#fff"
                        text-color="#303133"
                        active-text-color="#409EFF">
                    <el-menu-item index="/study" @click="go(1)" >学习中心</el-menu-item>
                    <el-menu-item index="/communicate" @click="go(2)">互动社区</el-menu-item>
                </el-menu>
            </div>
            <div class="right">
                <div class="no-login" v-if="!login">
                    <div class="sign" @click="loginFormVisible=true" href="#">登录</div>
                    <span id="space">|</span>
                    <div class="sign" @click="signinFormVisible=true" href="#">注册</div>
                </div>
                <div class="is-login" v-if="login">
                    <el-avatar size="50" :src="avatar"></el-avatar>
                    <el-dropdown @command="handleCommand">
                      <span class="el-dropdown-link">{{nickName}}
                          <i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="/home" icon="el-icon-s-home">首页</el-dropdown-item>
                                <el-dropdown-item command="/mySpace" icon="el-icon-user">个人中心</el-dropdown-item>
                                <el-dropdown-item command="/logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </div>

<!--    主体-->
    <div id="main-container">
        <router-view></router-view>
    </div>

<!--底部-->
    <div id="footer">
        <div id="footer-main">
            <img src="http://sacp.moeneko.top/%E6%97%A0%E6%A0%87%E9%A2%982.png">
            <div>让每个人都能享受学习带来的乐趣！</div>
            <div style="margin-top: 10px">Powered by 周庆(zhouqing)</div>
        </div>
    </div>

<!--    登录-->
    <el-dialog title="登录Sacp" v-model="loginFormVisible" width="500px" center>
        <el-form :model="form1">
            <el-form-item label="昵称：" label-width="60px">
                <el-input placeholder="请输入昵称" v-model="form1.nickName" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码：" label-width="60px" show-password>
                <el-input placeholder="请输入密码" v-model="form1.password" type="password" clearable autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
    <span class="dialog-footer">
      <el-button @click="loginFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="loginIn">确 定</el-button>
    </span>
        </template>
    </el-dialog>

<!--    注册-->
    <el-dialog title="注册Sacp账号" v-model="signinFormVisible" width="500px" center>
        <el-form :model="form2">
            <el-form-item label="头像：" label-width="90px">
                <el-image
                        style="width: 60px; height: 60px;border-radius: 30px"
                        :src="form2.avatar"
                        fit="fit">
                    <template #error>
                        <div class="image-slot" style="text-align: center">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </template>
                </el-image>
                <el-upload
                        class="upload-demo"
                        action="https://upload-z1.qiniup.com"
                        auto-upload="false"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :http-request="uploadRequest">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="昵称：" label-width="90px">
                <el-input placeholder="请输入昵称" v-model="form2.nickName" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码：" label-width="90px" show-password>
                <el-input placeholder="请输入密码" v-model="form2.password" type="password" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" label-width="90px" show-password>
                <el-input placeholder="请再次输入密码" v-model="form2.password2" type="password" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别：" label-width="90px" show-password>
                <el-radio v-model="form2.gender" label="男" border>男</el-radio>
                <el-radio v-model="form2.gender" label="女" border>女</el-radio>
            </el-form-item>
        </el-form>
        <template #footer>
    <span class="dialog-footer">
      <el-button @click="signinFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="signUp">确 定</el-button>
    </span>
        </template>
    </el-dialog>


<!--    返回顶部按钮-->
    <el-backtop right="150" bottom="120">
        <i class="el-icon-caret-top"></i>
    </el-backtop>
</div>
</body>
</html>